<template>
  <j-modal
    :title='title'
    width='1008px'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <template slot='footer'>
      <a-button @click='handleCancel'>取消</a-button>
      <a-button @click='handleOk' type='primary' v-if='!disableSubmit'>确认</a-button>
    </template>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row style='width: 100%;'>
          <!--          政策名称-->
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              hasFeedback
              label='政策名称'>
              <a-input v-decorator="['saasid', {}]" hidden />
              <a-input v-decorator="['proCode', {}]" hidden />
              <a-input :disabled='disableSubmit' placeholder='请输入政策名称'
                       v-decorator="['proName', { rules: [{ required: true, message: '请输入政策名称' }] }]" />
            </a-form-item>
          </a-col>
          <!--          有效时间-->
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              hasFeedback
              label='有效时间'>
              <a-range-picker
                format='YYYY-MM-DD' valueFormat='YYYY-MM-DD'
                :disabled='disableSubmit'
                v-decorator="['date',{rules: [{ required: true, message: '有效时间' }]}]"
                @change='dateChange'
              />
            </a-form-item>
          </a-col>
          <!--          详细内容-->
          <a-col :md='8' :sm='24'>
              <a-form-item
                :labelCol='labelCol'
                :wrapperCol='wrapperCol'
                hasFeedback
                label='详细内容'>
                <a-input :disabled='disableSubmit' type='text' :maxLength='500' placeholder='请输入详细内容'
                         v-decorator="['remarks']" />
              </a-form-item>
          </a-col>
        </a-row>
        <a-row style='width: 100%;'>
          <a-col :md='6' :sm='24' style='background-color: #FFFFFF;padding:0 20px;height: 773px'>
            <div class='box-title'>返利变量 </div>
            <draggable v-model="arr1" @end="end1" :options="{group:{name: 'itxst',pull:'clone'},sort: true}" flag='1' animation="300" :move="onMove">
                  <a-tag class='box-tag mb9' v-for="item in arr1" :key="item.id" flag='flag'>{{item.name}}</a-tag>
            </draggable>

            <div class='box-title'>运算符 </div>
            <div class='mt9'>
              <draggable v-model="arr2" @end="end3" :options="{group:{name: 'itxst',pull:'clone'},sort: true}" flag='1' animation="300" :move="onMove">
                <a-tag class='box-tag mb9' v-for="item in arr2" :key="item.id">{{item.name}}</a-tag>
              </draggable>
            </div>
            <div class='box-title'>值 </div>
            <draggable v-model="arr3" @end="end3" :options="{group:{name: 'itxst',pull:'clone'},sort: true}" flag='1' animation="300" :move="onMove">
              <a-tag class='box-tag mb9' v-for="item in arr3" :key="item.id">{{item.name}}</a-tag>
            </draggable>

          </a-col>

          <a-col :md='18' :sm='24'>
            <div>返利条件(满足什么条件后进行返利) </div>
            <draggable v-model="arr4" @end="end2"   group="itxst" animation="300" :move="onMove"  style='width: 100%;height: 200px;background-color: #d9d9d9'>
              <a-tag class='box-tag mb9' v-for="item in arr4" :key="item.id" closable @close="() => handleCloseTag('arr4',index)">{{item.name}}</a-tag>
            </draggable>
            <div>返利公式(怎么返利，反多少利) </div>
            <draggable v-model="arr5" @end="end2"   group="itxst" animation="300" :move="onMove"  style='width: 100%;height: 200px;background-color: #d9d9d9'>
              <a-tag class='box-tag mb9' v-for="item in arr5" :key="item.id" closable @close="() => handleCloseTag('arr5',index)">{{item.name}}</a-tag>
            </draggable>
          </a-col>

        </a-row>

      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import draggable from 'vuedraggable'
import { httpAction, postAction } from '@api/manage'
import pick from 'lodash.pick'
import CnMultiSelectTag from '@comp/dict/CnMultiSelectTag'
import { PageListMixin } from '@/mixins/PageListMixin'
import 'viewerjs/dist/viewer.css'

export default {
  name: 'templateModal',
  mixins: [PageListMixin],
  components: {
    draggable,
    CnMultiSelectTag,
  },

  data() {
    return {
      //定义要被拖拽对象的数组
      arr1: [
        { id: 1, name: '销量目标' },
        { id: 2, name: '销售额' },
        { id: 3, name: '下单时间' },
        { id: 4, name: '下单数量' },
        { id: 5, name: '下单次数' },
        { id: 6, name: '合作时间' },
        { id: 7, name: '参与促销陈列次数' },
        { id: 8, name: '单次下单金额' },
        { id: 9, name: '单次下单数量' },
        { id: 10, name: '首次下单' },
      ],
      arr2: [
        { id: 11, name: '等于(＝)' },
        { id: 21, name: '大于(＞)' },
        { id: 31, name: '小于(＜)' },
        { id: 41, name: '或(‖)' },
        { id: 51, name: '且(＆)' },
        { id: 61, name: '非(￢)' },
        { id: 71, name: '加(＋)' },
        { id: 81, name: '减(－)' },
        { id: 91, name: '乘(＊)' },
        { id: 101, name: '除(／)' },
        { id: 102, name: '左括号(（)' },
        { id: 103, name: '右括号(）)' },
        { id: 104, name: '大于等于(≧)' },
        { id: 105, name: '小于等于(≦)' },
      ],
      arr3: [
        { id: 11, name: '数字框' },
        { id: 21, name: '时间选择' },
        { id: 31, name: '文本' },
        { id: 41, name: '百分数' },
      ],
      arr4: [],
      arr5: [],
      moveId: -1,
      list2:[],
      title: '新增',
      drag:false,
      disabled: false,
      disableSubmit: false,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      url: {
        add: window._CONFIG['domianTpmURL'] + '/actPromotionController/saveOrUpdate'
      },

    }
  },
  computed: {},
  watch: {},
  created() {

  },
  methods: {
    //左边往右边拖动时的事件
    end1(e) {
      console.log(e)
      var that = this;
      var items = this.arr2.filter(function (m) {
        return m.id == that.moveId
      })
      //如果左边
      if (items.length < 2) return;
      this.arr2.splice(e.newDraggableIndex, 1)
    },
    //右边往左边拖动时的事件
    end2(e) {
      console.log(e)
      var that = this;
      var items = this.arr1.filter(function (m) {
        return m.id == that.moveId
      })
      //如果左边
      if (items.length < 2) return;
      this.arr1.splice(e.newDraggableIndex, 1)
    },
    // //move回调方法
    onMove(e, originalEvent) {
      console.log(e.relatedContext.component)
      this.moveId = e.relatedContext.component.$attrs.flag
      if (e.relatedContext.component.$attrs.flag=='1') return false;
      return true;
    },
    handleCloseTag(key,index){
      let arry=JSON.parse(JSON.stringify(this[key]))
      arry.splice(index,1)
      this.$set(this[key],arry)
    },

    add() {
      this.edit({})
    }
    ,
    edit(record) {
      this.form.resetFields()
      this.custList = []
      this.orgList = []
      this.bpList = []
      this.zpList = []
      this.categoriesDetailVoList = []
      this.model = Object.assign({}, record)
      this.visible = true
      record.isToDo == 1 ? this.istodo = true : this.istodo = false
      if (record.isFirst||record.isFirst===0) {
        this.$nextTick(() => {
          this.model.date = [this.model.startDate, this.model.endDate]
          this.categoriesDetailVoList = this.model.categoriesDetailVoList
          this.custList = this.model.detailVoList.filter(v => v.dateType == 4)
          this.orgList = this.model.detailVoList.filter(v => v.dateType == 3)
          this.bpList = this.model.detailVoList.filter(v => v.dateType == 1)
          this.zpList = this.model.detailVoList.filter(v => v.dateType == 2)
          this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
          // this.$set(this, 'taskItemsList', record.execRequires)
          // this.$set(this, 'taskItemsList1', record.writeOffRequires)
        })
      } else {

      }
    },
    close() {
      this.confirmLoading = false
      this.visible = false
    }
    ,
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          for (let i=0;i<this.zpList.length;i++){
            let item = this.zpList[i]
            if(item.isSpirit==1&&!item.spiritRatio&&!item.identifier){
              // debugger
              this.$message.warning('请输入带走比例和标识符')
              return
            }

          }
          that.confirmLoading = true
          let formData = { ...this.model, ...values }
          formData.detailVoList = [...this.custList, ...this.orgList, ...this.bpList, ...this.zpList]
          postAction(this.url.add, formData).then(res => {
            if (res.success) {
              that.$message.success(res.message)
              that.close()
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
        }
      })
    }
    ,
    handleCancel() {
      this.close()
    }
    ,
    dateChange(date) {
      if (!date) {
        this.model.startDate = ''
        this.model.endDate = ''
        return
      }
      this.model.startDate = date[0]
      this.model.endDate = date[1]
    },

    //开始拖拽事件
    onStart(){
      this.drag=true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag=false;
    },
  }
}
</script>

<style lang='less' scoped>
.mt9{
  margin-top: 9px;
}
.mb9{
  margin-bottom: 9px;
}



.box-title{
  width: 52px;
  height: 18px;
  font-size: 13px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #333333;
}

.box-tag{
  padding:0 3px;
  min-width: 80px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 13px;
  color: #3c3c3c;
  font-weight: 500;
  text-align: center;
  line-height: 32px;
  margin-right: 17px;
}







</style>